<template>
	<view>
		<picker
			:mode="mode"
			@change="pickerChange"
			:value="selectValue"
			:range="dataList"
			:range-key="text"
			:start="start"
			:end="end"
			:fields="fields"
			:custom-item="customItem"
			:disabled="disabled"
		>
			<view class="select-picker">
				<text class="placeholder" :class="selectValue === '' ? 'default' : ''">{{ selectText }}</text>
				<view v-if="clear" class="select-picker-arrow-area">
					<view class="select-picker-arrow" v-if="selectValue === ''"></view>
					<icon v-else @tap.stop="pickerCancel" style="transform: translateY(6px) rotate(-45deg);" type="clear" size="16" />
				</view>
				<view v-else class="select-picker-arrow-area"><view class="select-picker-arrow"></view></view>
			</view>
		</picker>
	</view>
</template>

<script>
export default {
	name: 'hpy-form-select',
	props: {
		title: {
			type: String,
			default: '请选择'
		},
		// selector 或 multiSelector
		mode: {
			type: String,
			default: 'selector'
		},
		// 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
		start: {
			type: String,
			default: ''
		},
		// 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
		end: {
			type: String,
			default: ''
		},
		// 有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI
		fields: {
			type: String,
			default: 'day'
		},
		// 可为每一列的顶部添加一个自定义的项
		customItem: {
			type: String,
			default: ''
		},
		// 下拉选择的数据
		dataList: {
			type: Array,
			default: function() {
				return [];
			}
		},
		// 指定显示值的key
		text: {
			type: String,
			default: ''
		},
		// 实际值的key
		name: {
			type: String,
			default: ''
		},
		// 保存值
		value: {
			type: [String, Number],
			default: ''
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 是否显示clear按钮
		clear: {
			type: Boolean,
			default: false
		}
	},
	model: {
		prop: 'value',
		event: 'pickerChange'
	},
	data() {
		return {
			selectValue: ''
		};
	},
	created() {
		this.initSelected(this.value);
	},
	watch: {
		value(val) {
			this.initSelected(val);
		},
		dataList(val) {
			if (this.mode == 'selector' && this.value) {
				this.initSelected(this.value);
			}
		}
	},
	computed: {
		selectText() {
			if (this.selectValue === '') {
				return this.title;
			}
			if ('date' == this.mode || 'time' == this.mode) {
				return this.selectValue;
			} else {
				if (!this.dataList || this.dataList.length == 0) {
					return this.title;
				}
				if (this.text) {
					return this.dataList[this.selectValue][this.text];
				}
				return this.dataList[this.selectValue];
			}
		}
	},
	methods: {
		// 初始化选择
		initSelected(value) {
			if ('date' == this.mode || 'time' == this.mode) {
				this.selectValue = value;
			} else {
				if (value && this.dataList.length > 0) {
					if (this.name) {
						this.dataList.some((item, index) => {
							if (item[this.name] == value) {
								this.selectValue = index;
								return true;
							}
						});
					} else {
						this.dataList.some((item, index) => {
							if (item == value) {
								this.selectValue = index;
								return true;
							}
						});
					}
				} else {
					this.selectValue = value;
				}
			}
		},
		// 选择
		pickerChange(e) {
			const val = e.detail.value;
			this.selectValue = val;
			if ('date' == this.mode || 'time' == this.mode) {
				this.$emit('input', val);
				this.$emit('change', val);
			} else {
				if (this.dataList && this.dataList.length > 0) {
					let data = this.dataList[val];
					if (this.name) {
						this.$emit('input', data[this.name]);
					} else {
						this.$emit('input', data);
					}
					this.$emit('change', { index: val, value: data });
				} else {
					this.selectValue = '';
					this.$emit('input', '');
					this.$emit('change', { index: -1, value: '' });
				}
			}
		},
		pickerCancel() {
			this.$emit('cancel', true);
		}
	}
};
</script>

<style scoped>
.select-picker {
	/* #ifndef APP-NVUE */
	display: flex; /* #endif */
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	font-size: $uni-font-size-custom-d;
	line-height: 38px;
	padding: 0 5px;
	overflow: hidden; /* #ifdef APP-NVUE */
	height: 40px; /* #endif */
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	text-indent: 4px;
}
.select-picker-arrow-area {
	position: relative;
	width: 20px; /* #ifndef APP-NVUE */
	margin-left: auto;
	display: flex; /* #endif */
	justify-content: center;
	transform: rotate(-45deg);
	transform-origin: center;
}
.select-picker-arrow {
	width: 7px;
	height: 7px;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
}
.placeholder.default {
	color: grey;
	text-indent: 0px;
}
</style>
